<template>

    <el-container>
        <el-header id="manageHeader" height="420px">
            <!-- 搜索表单 -->
            <el-form :inline="true" :model="searchBase" class="demo-form-inline" style="margin-top: 3%;">
                <el-form-item label="教师号" style="margin-left:-10px">
                    <el-input v-model="searchBase.teacherid" placeholder="请输入" style="width: 120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="毕业年份">
                    <el-input v-model="searchBase.endTime" placeholder="请输入" style="width: 100px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="研究方向">
                    <el-input v-model="searchBase.researchdir" placeholder="请输入" style="width: 120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="职称">
                    <el-select v-model="value" style="width:90px" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="研究生导师">
                    <el-select v-model="value2" style="width:90px" placeholder="请选择">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onsubmit">查询</el-button>
                </el-form-item>
                <download-excel class="export-excel-wrapper" :data="tableData" :fields="json_fields"
                    name="教师基本信息.xls" style="float:right">
                    <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                    <el-button type="primary">导出excel</el-button>
                </download-excel>
            </el-form>

            <!--部门表格-->
            <template>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="teacherid" label="教师号" align="center">
                    </el-table-column>
                    <el-table-column prop="teacherName" label="姓名" align="center">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" align="center">
                    </el-table-column>
                    <el-table-column prop="title" label="职称" align="center">
                    </el-table-column>
                    <el-table-column prop="tutor" label="研究生导师" align="center">
                    </el-table-column>
                    <el-table-column prop="endTime" label="毕业时间" align="center">
                    </el-table-column>
                    <el-table-column prop="graduationSchool" label="毕业院校" align="center">
                    </el-table-column>
                    <el-table-column prop="speciality" label="专业" align="center">
                    </el-table-column>
                    <el-table-column prop="education" label="学位" align="center">
                    </el-table-column>
                    <el-table-column prop="researchdir" label="研究方向" align="center">
                    </el-table-column>


                </el-table>
            </template>

            <!--分页工具条-->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="3"
                layout="total,  prev, pager, next, jumper" :total="totalCount" style="margin-top:10px">
            </el-pagination>

        </el-header>
        <el-main>

            <div v-show="this.$route.query.mark =='教务处'" class="echart" id="mychart1"
                :style="{ float: 'left', width: '50%', height: '250px' }">
            </div>
            <div v-show="this.$route.query.mark =='科研部门'" class="echart" id="mychart2"
                :style="{ float: 'left', width: '50%', height: '250px' }">
            </div>
            <div v-show="this.$route.query.mark =='教师工作部'" class="echart" id="mychart3"
                :style="{ float: 'left', width: '50%', height: '250px' }">
            </div>

            <div class="echart" id="mychart4" :style="{ float: 'left', width: '45%', height: '200px' }">
            </div>




        </el-main>
    </el-container>
</template>

<script>
import axios from "axios";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, PieChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LegendComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    PieChart,
    LegendComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);

export default {
    name: 'Depinfo',
    data() {
        return {
            // 接受学院的信息
            departmentName: '',
            // 搜索的表单
            searchBase: {
                teacherid: "",
                endTime: "",
                researchdir: "",
                title: '',
                tutor: ''
            },
            // 教师职称下拉框
            options: [{
                value: '讲师',
                label: '讲师'
            }, {
                value: '副教授',
                label: '副教授'
            }, {
                value: '教授',
                label: '教授'
            }],
            value: '',
            // 研究生导师
            options2: [{
                value: '是',
                label: '是'
            }, {
                value: '否',
                label: '否'
            }, {
                value: '',
                label: '全部'
            }
            ],
            value2: '',
            // 统计表格数据
            tableData: [],

            // 分页
            totalCount: 0,

            // 当前页码
            currentPage: 1,
            pageSize: 3,
            // 导出EXCEL的页面数据
            json_fields: {
                "教师号": "teacherid",
                "姓名": "teacherName",
                "性别": "sex",
                "籍贯": "place",
                "出生日期": "birth",
                "身份证号": "numberID",
                "民族": "nation",

                "政治面貌": "polstatus",
                "入职时间": "entryTime",
                "电话": "tel",
                "电子邮箱": "mail",
                "婚姻状况": "marriage",
                "学历": "education",
                "研究生导师": "tutor",
                "职称": "title",
            },
        }

    },
    mounted() {
        this.departmentName = this.$route.query.mark
        this.selectAll();
        // if (this.$route.query.mark =='教务处'){
        //     this.initEcharts1();
        // } else if (this.$route.query.mark =='科研部门'){
        //     this.initEcharts2();
        // } else if (this.$route.query.mark =='教师工作部'){
        //     this.initEcharts3();
        // }
        this.initEcharts1();
        this.initEcharts2();
        this.initEcharts3();
        this.initEcharts4();
    },
    methods: {
        onsubmit() {
            this.searchBase.title = this.value
            this.searchBase.tutor = this.value2
            this.selectAll()

        },
        selectAll() {

            axios({
                method: "post",
                url: " http://localhost:8888/Teachersystem/depInfomation/infoselect?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize ,
                data: this.searchBase
            }).then(resp => {
                this.tableData = resp.data.rows;
                this.totalCount = resp.data.totalCount;
            })
        },
        initEcharts1() {
            const myChart = echarts.init(document.getElementById("mychart1"));
            axios({
                method: "get",
                url: "http://localhost:8888/Teachersystem/depInfomation/getBar1"
            }).then((resp) => {// 图标初始化
                myChart.setOption({
                    title: {
                        text: "科研统计"
                    },
                    xAxis: {
                        data: ["优", "良", "合格"]
                      
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "销量",
                            type: "bar", //类型为柱状图
                            data: resp.data
                        }
                    ]
                });
            })
        },
        initEcharts2() {
            const myChart = echarts.init(document.getElementById("mychart2"));
            axios({
                method: "get",
                url: "http://localhost:8888/Teachersystem/depInfomation/getBar2"
            }).then((resp) => {// 图标初始化
                myChart.setOption({
                    title: {
                        text: "科研项目统计"
                    },
                    xAxis: {
                          data: ["科研获奖", "科研项目"]
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "销量",
                            type: "bar", //类型为柱状图
                            data: resp.data
                        }
                    ]
                });
            })
        },
        initEcharts3() {
            const myChart = echarts.init(document.getElementById("mychart3"));
            axios({
                method: "get",
                url: "http://localhost:8888/Teachersystem/depInfomation/getBar3"
            }).then((resp) => {// 图标初始化
                myChart.setOption({
                    title: {
                        text: "教师作品统计"
                    },
                    xAxis: {
                        data: ["论文数", "著作数", "专利数"]
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "销量",
                            type: "bar", //类型为柱状图
                            data: resp.data
                        }
                    ]
                });
            })
        },
        initEcharts4() {
            const myChart = echarts.init(document.getElementById("mychart4"));
            // 图标初始化
            axios({
                method: "get",
                url: "http://localhost:8888/Teachersystem/depInfomation/getPie"
            }).then((resp) => {
                myChart.setOption({
                    legend: {
                        // 图例
                        data: resp.data,
                        right: "10%",
                        top: "20%",
                        orient: "vertical"
                    },
                    title: {
                        // 设置饼图标题，位置设为顶部居中
                        text: "教师数据",
                        top: "0%",
                        left: "center"
                    },
                    series: [
                        {
                            type: "pie",
                            label: {
                                show: true,
                                formatter: " {c} 个"
                            },
                            top: "10%",
                            radius: "60%", //饼图半径
                            data: resp.data
                        }
                    ]

                });
            })


        },

        // 分页操作
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.selectAll();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.selectAll();
        }
    },
}


</script>

<style>
</style>